import { data } from './data.js';

let imgs = document.getElementById("imgs");
let sideBar = document.getElementById("side-bar");

let activeImg = null;
let activeNav = null;

let imgsDom = [];
let navDom = [];

for (let i = 0; i < data.length; i++) {
    const item = data[i];
    const tagA = document.createElement("a");
    tagA.setAttribute('href', '#');
    tagA.style.backgroundImage = `url("${item.img}")`;
    imgs.appendChild(tagA);
    imgsDom.push(tagA);

    const tagNav = document.createElement("a");
    tagNav.setAttribute('href', '#');
    tagNav.setAttribute('class', 'nav');
    tagNav.setAttribute('title', `${item.title}:${item.desc}`);
    tagNav.innerHTML = `<span>${item.title}</span>${item.desc}`;
    sideBar.appendChild(tagNav);
    navDom.push(tagNav)

    if (i == 0) {
        tagA.setAttribute('class', 'active');
        tagNav.setAttribute('class', 'active');

        activeImg = tagA;
        activeNav = tagNav;
    }

    tagNav.onmouseenter = function () {
        clearInterval(timer);
        activeImg.setAttribute('class', '');
        activeNav.setAttribute('class', 'nav');

        tagA.setAttribute('class', 'active');
        tagNav.setAttribute('class', 'active');

        activeImg = tagA;
        activeNav = tagNav;
    }
    tagNav.onmouseleave = function () {
        timer = setInterval(move, 3000);
    }
}

function move() {
    const index = imgsDom.indexOf(activeImg);
    activeImg.setAttribute('class', '');
    activeNav.setAttribute('class', 'nav');

    if (index === data.length - 1) {
        activeImg = imgsDom[0];
        activeNav = navDom[0];
    } else {
        activeImg = imgsDom[index + 1];
        activeNav = navDom[index + 1];
    }
    activeImg.setAttribute('class', 'active');
    activeNav.setAttribute('class', 'active');
}

let timer = setInterval(move, 1500);